<template>
    <div class="customerBill">
    <!-- 时间选择框 -->
    <el-date-picker
    @change="searchHandler"
      size="mini"
      v-model="value"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right"
    >
    </el-date-picker>
    <!-- 下拉框 -->
    <el-select
    @change="searchHandler"
      class="selectType"
      v-model="type"
      size="mini"
      clearable
      placeholder="请选择类型"
    >
      <el-option
        v-for="item in options1"
        :key="item"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>
    <el-select
    @change="searchHandler"
      class="selectStatus"
      v-model="status"
      size="mini"
      clearable
      placeholder="请选择状态"
    >
      <el-option
        v-for="item in options2"
        :key="item"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>
    <el-select
    @change="searchHandler"
      class="selectId"
      v-model="userId"
      size="mini"
      clearable
      placeholder="顾客编号"
    >
      <el-option
        v-for="item in data"
        :key="item"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>
    <!-- 查询按钮 -->
    <el-button @click="searchHandler" class="search" size="small" type="primary"
      >查询</el-button
    >
    <!-- 表单 -->
    <el-table
      class="table"
      :data="customerBills"
      size="small"
      stripe
      style="width: 100%"
    >
      <el-table-column prop="id" label="编号" width="180"> </el-table-column>
      <el-table-column prop="transferMoney" label="交易金额" width="180">
      </el-table-column>
      <el-table-column prop="transferTime" label="交易时间">
        <template slot-scope="scope">
          {{ parseTime(scope.row.transferTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="type" label="交易类型">
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template scope="scope">
          <el-tag type="success">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述"> </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        layout="prev, pager, next"
        :page-size="list.pageSize"
        :total="total"
        @current-change="changeHendler"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { parseTime } from "@/utils/index.js";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value:"",
      type:"",
      status:"",
      userId:"",
      options1: ["充值", "消费"],
      options2: ["正常", "未审核"],
      list: {
        page: 1,
        pageSize: 10,
      },

    };
  },
  computed: {
    ...mapState("customerBill", ["customerBills", "total","data"]),

  },
  methods: {
    parseTime,
    ...mapActions("customerBill", ["findAllCustomerBill"]),
    // 查询函数
    searchHandler(){
      let data={
        ...this.list,
      }
      if (this.value){
        data.beginTime = Date.parse(this.value[0]);
        data.endTime = Date.parse(this.value[1]);
      }
      if (this.status){
        data.status = this.status;
      }
      if (this.userId){
        data.userId = this.userId;
      }
      if (this.type){
        data.type = this.type;
      }
      console.log(data);
      this.findAllCustomerBill(data)
    },
    // 分页函数
    changeHendler(page){
      this.list.page=page,
      this.findAllCustomerBill(this.list)
    }
  },
  created() {
    this.findAllCustomerBill(this.list)
  },
};
</script>
<style scoped>
.selectType {
  margin-left: 20px;
}
.selectStatus {
  margin-left: 20px;
}
.selectId {
  margin-left: 20px;
}
.search {
  margin-left: 20px;
}
.table {
  margin-top: 10px;
}
.pagination {
  float: right;
}
</style>